<!--智慧消防V1.0-admin页面-->
<template>
    <div class="bg-main">
        <div class="bg-left">
            <div class="left-content">
                <div class="data-top"  @click="toEquipmentList">
                    <div class="content-box">
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">设备总数（个）</div>
                            <div style="color: #ff0300;font-size: 30px;line-height: 35px">{{ deviceData.deviceTotal }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">异常设备（个）</div>
                            <div style="color: #ff8000;font-size: 30px;line-height: 35px">{{ deviceData.abnormalTotal }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">维保设备（个）</div>
                            <div style="color: #01fcff;font-size: 30px;line-height: 35px">{{ deviceData.maintenanceTotal }}</div>
                        </div>
                    </div>
                </div>
                <div class="data-top" v-if="adminAndJw||wb"  @click="toEnterpriseList" style="margin-top: 20px">
                    <div class="content-box">
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">业主企业（家）</div>
                            <div style="color: #01fcff;font-size: 30px;line-height: 35px">{{ enterprise.yzTotal }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">维保企业（家）</div>
                            <div style="color: #ff8000;font-size: 30px;line-height: 35px">{{ enterprise.wbTotal }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">存在隐患（家）</div>
                            <div style="color: #ff0300;font-size: 30px;line-height: 35px">{{ enterprise.hasDangerTotal }}</div>
                        </div>
                    </div>
                </div>
                <div class="data-bottom" style="height: calc( 100vh - 285px)" v-if="adminAndJw||wb||xz">
                    <div class="bottom-box-left">
                        <div  @click="toWorkOrder">
                            <div class="title"><span class="font">维保工单数据</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="workOrderList" :config="workOrderList" style="width:440px;height:calc(50vh - 167px);opacity: 0.6"  />
                            </div>
                        </div>
                        <div v-if="adminAndJw">
                            <div class="title"><span class="font">异常企业数据</span></div>
                            <div style="margin-top: 5px">
                                <el-menu
                                        :default-active="activeIndex2"
                                        class="el-menu-demo"
                                        mode="horizontal"
                                        @select="handleSelect"
                                        background-color="#545c64"
                                        text-color="#fff"
                                        active-text-color="#ffd04b">
                                    <el-menu-item index="1">异常</el-menu-item>
                                    <el-menu-item index="2">非异常</el-menu-item>
                                </el-menu>
                                <div v-if="activeIndex2=='1'" @click="toCheckRecordsList">
                                    <dv-scroll-board ref="hasCheckRecordsList" :config="hasCheckRecordsList" style="width:440px;height:calc(50vh - 288px);opacity: 0.6"  />
                                </div>
                                <div v-else @click="toCheckRecordsList">
                                    <dv-scroll-board ref="nonCheckRecordsList" :config="nonCheckRecordsList" style="width:440px;height:calc(50vh - 288px);opacity: 0.6"  />
                                </div>
                            </div>
                        </div>
                        <div v-if="wb||xz" @click="toCheckRecordsList">
                            <div class="title"><span class="font">考核单数据</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="checkRecordsList" :config="checkRecordsList" style="width:440px;height:calc(50vh - 167px);opacity: 0.6"  />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-top">
            <!--视频系统按钮-->
            <div style="width: 460px;height: 36px;position: absolute;left: 0;top: 30px;color:#fff;font-size: 16px;margin-left: 20px">
                当前角色:{{userInfo.roleName}}
            </div>
            <div style="width: 460px;height: 36px;position: absolute;right: 0;top: 30px">
                <div class="video-button" @click="enterSystem" v-if="admin"></div>
                <div class="notice-button" @click="enterNotice">
                    <el-badge :value="noticeVal" class="item">
                        <i class="el-icon-if-huoqingxinxi"></i>
                    </el-badge>
                </div>
                <div class="notice-button" @click="enterAgency">
                    <el-badge :value="agencyNum" class="item">
                        <i class="el-icon-if-meirirenwu1"></i>
                    </el-badge>
                </div>
                <div class="notice-button"  v-if="adminAndJw">
                    <el-badge class="item">
                     <el-button type="danger"  size="medium" @click="enterDrill">演练</el-button>
                    </el-badge>
                </div>
            </div>
        </div>
        <div class="bg-right">
            <div class="right-content">
                <div class="data-top">
                    <div class="content-box" @click="toFireInfo">
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">真实火情（起）</div>
                            <div style="color: #ff0300;font-size: 30px;line-height: 35px">{{ fireInfo.fireNum }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">已处置（起）</div>
                            <div style="color: #ff8000;font-size: 30px;line-height: 35px">{{ fireInfo.finish }}</div>
                        </div>
                        <div style="font-weight: bold;padding: 10px">
                            <div style="font-size: 16px;line-height: 20px">未处置（起）</div>
                            <div style="color: #01fcff;font-size: 30px;line-height: 35px">{{ fireInfo.unFinish }}</div>
                        </div>
                    </div>
                </div>
                <div class="data-bottom" >
                    <div class="bottom-box-right" style="color: #fff">
                        <div @click="toTake" v-if="wb||admin||xz">
                            <div class="title"><span class="font">任务领取情况</span>
                                <div style="margin-top: 5px">
                                    <dv-scroll-board ref="taskOverStatus" :config="taskOverStatus" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />
                                </div>
                            </div>
                        </div>
                        <div @click="toMaintenanceInfoList" v-if="wb||admin||xz">
                            <div class="title"><span class="font">维保任务情况</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="maintenanceInfoList" :config="maintenanceInfoList" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />
                            </div>
                        </div>
                        <div @click="toNonEmergency">
                            <div class="title"><span class="font">隐患工单数据</span></div>
                            <div style="margin-top: 5px">
                                <dv-scroll-board ref="nonEmergency" :config="nonEmergency" style="width:440px;height:calc(33vh - 93px);opacity: 0.6"  />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute;z-index: 10;width: calc(100% - 10px);margin: 0 5px" v-if="adminAndJw">
            <baidu-map class="bm-view" :zoom="13" @ready="initMap" center="哈密市" map-type="BMAP_HYBRID_MAP" :scroll-wheel-zoom="true">
                <bm-marker v-for="item in unFinishFireList" :key="item.ucId" :position="{lng: item.longitude, lat: item.latitude}" @click="infoWindowOpen(item)"></bm-marker>
                <bm-info-window :position="{lng: infoWindow.longitude, lat:infoWindow.latitude}" title="火情信息提示窗" :show="infoWindowShow" @close="infoWindowShow=false">
                    <h4>{{infoWindow.name}}</h4>
                    <p>所属主体：{{infoWindow.enterpriseName}}<br></p>
                    <p>所属建筑：{{infoWindow.buildName}}<br></p>
                    <p>详细位置：{{infoWindow.loaction}}<br></p>
                    <p>确认时间：{{infoWindow.fireConfirmTime|dateFormat}}<br></p>
                </bm-info-window>
            </baidu-map>
        </div>
        <div v-else style="background-image:url('https://ifire-oss.oss-cn-shanghai.aliyuncs.com/logo/admin/ADMIN402894db783e115e01783e115e850000/2021/06/fb16d695-b0cb-4141-a862-2f1fe6953c10.jpg');background-size:100% 100%;background-repeat:no-repeat;width: 100%;height: 100vh"></div>
    </div>
</template>

<script>
import 'aliyun-webrtc-sdk'
import {
    getDeviceData, getEnterpriseDominantData, getEnterpriseTaskStatus,
    getFireData, getHasCheckEnterPriseLists,
    getIFireDataPage, getInCheckRecordsList, getMaintenanceInfoList, getOverTimeOrderList,
    getUnFinishFireInfoList, getUserAgencyNum,
    getUserNoReadNotice
} from "@/api/common";
import {joinChannel, pullPerson,deleteChannel} from "@/api/alirtc";
import {showVideoUser} from "@/api/user";
import {getWorkOrderPage} from "@/api/workOrder";
import {getInHiddenDangerList, getInHiddenDangerPage} from "@/api/hiddenDanger"
export default {
    name: 'DashboardAdmin',
    data() {
        return {
            activeIndex2:"1",
            fullscreen:true,
            resizeBox:false,
            nonEmergency: {
                header:['隐患名称', '时间', '责任单位','状态'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:5,
                data:[]
            },
            maintenanceInfoList:{
                header:['名称', '所属企业', '维保企业','状态'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:5,
                data:[]
            },
            workOrderList:{
                header:['工单名称',"所属企业", '提交时间','状态'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:5,
                data: []
            },
            taskOverStatus:{
                header:['企业名称', '电话','任务领取'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:5,
                data: []
            },
            checkRecordsList:{
                header:['考核名称','所属企业','考核时间'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:5,
                data: []
            },
            nonCheckRecordsList:{
                header:['企业名称','联系人','电话'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:4,
                data: []
            },
            hasCheckRecordsList:{
                header:['企业名称','联系人','电话'],
                headerBGC:"#02455e",
                oddRowBGC:'#003B51',
                evenRowBGC:'#003B51',
                rowNum:4,
                data: []
            },
            hasVideo:false,
            hasNotice:false,
            aliWebrtc:{},
            deviceData:{},
            noticeVal:0,
            agencyNum:0,
            realFireNum:0,
            remoteList:[],
            noticeText:'',
            location:"",
            pullVideoStatus:false,
            userList:[],
            videoForm:{},
            videoFormRules:{
                name: [{required: true, message: '视频人员不能为空', trigger: 'change'}],
            },
            unFinishFireList:[],
            enterprise:{},
            infoWindow:{},
            infoWindowShow:false,
            fireInfo:{},
            deleteForm:{
                action:"DeleteChannel",
                channelId:'',
            },
            timeout: 30 * 1000,//30秒一次心跳
            timeoutObj: null,//心跳心跳倒计时
            serverTimeoutObj: null,//心跳倒计时
            timeOutNum: null,//断开 重连倒计时
        }
    },
    computed:{
        admin(){
            let roleCode = this.$store.getters.roleCode;
            return roleCode=="SUPER"||roleCode=="ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"
        },
        adminAndJw(){
            let roleCode = this.$store.getters.roleCode;
            return roleCode=="SUPER"||roleCode=="ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"||roleCode=="ZZ-ADMIN"
        },
        wb(){
            let roleCode = this.$store.getters.roleCode;
            return roleCode=="WB-ADMIN"||roleCode=="WB-YH"
        },
        xz(){
            let roleCode = this.$store.getters.roleCode;
            return roleCode=="XZ-ADMIN"||roleCode=="XZ-YH"
        },
        userInfo(){
            return this.$store.getters.userInfo
        }
    },
    created(){
        this.initView()
    },
    methods:{
        handleSelect(key, keyPath) {
            this.activeIndex2 = keyPath[0]
            this.getHasCheckEnterPriseList(key)
        },
        initView(){
            if (this.admin||this.wb||this.xz){
                this.getOverTimeOrderList()
                this.initTaskOverStatus()
                this.getInCheckRecordsList()
                this.initMaintenanceDate()
            }
            this.getInHiddenDangerList()
            this.getMaintenanceInfoList()
            this.getHasCheckEnterPriseList(1)
            this.getEnterpriseDominantData()
            this.getFireData()
            this.initDeviceData()
            this.getUserNoReadNotice()
            this.getUserAgencyNum()
            this.getUnFinishFireInfoList()
        },
        initDeviceData(){
            getDeviceData({}).then(res=>{
                this.deviceData = res.data
            })
        },
        getUserNoReadNotice() {
            getUserNoReadNotice({}).then(res => {
                this.noticeVal=res.data
            }).catch(res => {
            })
        },
        getUserAgencyNum(){
            getUserAgencyNum({}).then(res=>{
                this.agencyNum=res.data
            })
        },
        getUnFinishFireInfoList(){
            getUnFinishFireInfoList({}).then(res=>{
                this.unFinishFireList = res.data
                console.log(res)
            })
        },
        getEnterpriseDominantData(){
            getEnterpriseDominantData({}).then(res=>{
                this.enterprise = res.data
            })
        },
        //获取未完成订单信息 getOverTimeOrderList
        getOverTimeOrderList(){
            getOverTimeOrderList({}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                       [item.name, item.enterpriseName,item.addTimeStr,item.status!=7?'<span style="color: #ff0000">未完成</span>':'<span style="color: #0bb20c">已完成</span>'],
                    )
                })
                this.$refs.workOrderList.updateRows(data, 0);
            })
        },
        getHasCheckEnterPriseList(val){
            getHasCheckEnterPriseLists({hasCheck:val}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.contacts,item.mobile],
                    )
                })
                if (val==1){
                    this.$refs.hasCheckRecordsList.updateRows(data, 0);
                }else {
                    this.$refs.nonCheckRecordsList.updateRows(data, 0);
                }
            })
        },
        //获取考核单数据信息 getInCheckRecordsList
        getInCheckRecordsList(){
            getInCheckRecordsList({type:0}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.enterpriseName+"考核单", item.enterpriseName,item.addTimeStr],
                    )
                })
                this.$refs.checkRecordsList.updateRows(data, 0);
            })
        },
        getInHiddenDangerList(){
            getInHiddenDangerList({customize:" and status!=7"}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.addTimeStr,item.enterpriseName,item.status!=5?'<span style="color: #ff0000">未完成</span>':'<span style="color: #0bb20c">已完成</span>'],
                    )
                })
                this.$refs.nonEmergency.updateRows(data, 0);
            })
        },
        getMaintenanceInfoList(){
            getMaintenanceInfoList({}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.title, item.enterpriseName,item.maintenaceEnterpriseName,item.statusStr],
                    )
                })
                this.$refs.maintenanceInfoList.updateRows(data, 0);
            })
        },
        resizeClick(val){
            this.resizeBox = true
            console.log(this.remoteList[val])
            this.$nextTick(() => {
                this.aliWebrtc.setDisplayRemoteVideo(this.remoteList[val].userId,this.$refs.resizeVideo,1)
            });
        },
        infoWindowOpen(val){
            this.infoWindow = val
            this.infoWindowShow = true
        },
        toEquipmentList(){
            this.$router.push("/equipment/equipment")
        },
        toEnterpriseList(){
            this.$router.push("/enterprise/list")
        },
        toNonEmergency(){
            this.$router.push("nonEmergency/hiddenDangerList")
        },
        toTake(){
            this.$router.push("/taskManage/task")
        },
        toFireInfo(){
            this.$router.push("/fireAlarm/fireInfo")
        },
        toWorkOrder(){
            this.$router.push("/workOrder/maintenanceList")
        },
        toCheckRecordsList(){
            this.$router.push("/maintenance/checkRecordsList")
        },
        toMaintenanceInfoList(){
            this.$router.push("/maintenance/maintenanceTaskList")
        },
        initMap ({BMap,map}) {
            //获取火情信息数据内容
            this.getUnFinishFireInfoList()
        },
        enterSystem(){
            this.$router.push("/equipment/video")
        },
        enterNotice(){
            this.$router.push("/common/selfNotice")
        },
        enterAgency(){
            this.$router.push("/taskManage/agencyList")
        },
        enterDrill(){
            this.$router.push("/drillTips/drill")
        },
        hungUp(){
            this.leaveVideo()
            this.deleteChannel()
        },
        initNonEmergency(){
            getInHiddenDangerPage({pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                        [item.name, item.addTimeStr, item.enterpriseName,item.status!=0?'<span style="color: #ff0000">未整改</span>':'<span style="color: #0bb20c">已整改</span>'],
                    )
                })
                //this.$refs.nonEmergency.updateRows(data, 0);
            })
        },
        initMaintenanceDate(){
            getWorkOrderPage({pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.feedbackTime, item.maintenanceEnterpriseName,item.status!=7?'<span style="color: #ff0000">维保中</span>':'<span style="color: #0bb20c">维保完成</span>'],
                    )
                })
                //this.$refs.maintance.updateRows(data, 0);
            })
        },
        initTaskOverStatus(){
            getEnterpriseTaskStatus({deleted:false}).then(res=>{
                let objList = res.data
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name, item.mobile, item.taskCompletion],
                    )
                })
                this.$refs.taskOverStatus.updateRows(data, 0);
            })
        },
        getFireData(){
            getFireData({}).then(res=>{
                this.fireInfo = res.data
            })
        },
        initIFireData(){
            getIFireDataPage({deleted:false,pageSize:100}).then(res=>{
                let objList = res.data.list
                let data =[]
                objList.forEach(item=>{
                    data.push(
                            [item.name,item.fireTimeStr, item.loaction],
                    )
                })
                //this.$refs.ifireList.updateRows(data, 0);
            })
        },
        //校验当前设备是否支持
        isSupport(val,debug,channel){
            let option = {}
            let _this = this;
            if (debug){
                option.isDebug=true
            }
            val.isSupport(option).then((res)=>{
                this.onJoinEvent(val)
                this.onPublisher(val)
                this.onBye(val)
                this.onLeave(val)
                this.OnRefresh(val)
                this.startPreview(val)
                this.hasVideo = true;
                joinChannel({displayName:"消防队",channelId:channel.channel.substring(5),admin:false}).then(res=>{
                    console.log("joinChannel")
                    console.log(res.data)
                    _this.aliWebrtc.joinChannel(res.data,"消防队").then(obj=>{
                        _this.$nextTick(() => {
                            _this.publish(_this.aliWebrtc)
                            _this.startPreview(_this.aliWebrtc)
                        });
                        console.log("加入频道成功")
                    }).catch((error)=>{
                        console.log("加入频道失败",error)
                    })
                }).catch(error=>{
                    console.log("加入频道失败",error)
                })
            }).catch((error)=>{
                console.log("加入频道失败",error)
                this.$notify.error({
                    title: '成功',
                    message: "当前设备不支持webrtc"
                })
            })
        },
        //开启本地预览模式
        startPreview(val){
            val.startPreview(this.$refs.localVideo).then(()=>{
                console.log("本地预览")
            }).catch((error) => {
                console.log("预览失败",error)
            });
        },
        //推发布流
        publish(val){
            val.configLocalAudioPublish = true;
            val.configLocalCameraPublish = true;
            val.publish().then(()=>{
                console.log("发布流成功")
            } ,(error)=>{
                console.log("发布流失败",error);
            });
        },
        //加入视频通话
        joinChannel(val){
            this.aliWebrtc = new AliRtcEngine();
            this.isSupport(this.aliWebrtc,true,val)
        },
        // remote用户加入房间 onJoin
        onJoinEvent(val){
            val.on("onJoin", (publisher) => {
                console.log(publisher)
                val.configRemoteAudio(publisher.userId, true);
                val.configRemoteCameraTrack(publisher.userId, true, true);
                // showAlert(publisher.displayName + "加入房间","success");
                console.log(publisher.displayName + "加入房间");
            });
        },
        //remote流发布事件 onPublish
        onPublisher(val){
            val.on("onPublisher", (publisher) => {
                val.subscribe(publisher.userId).then((userId)=>{
                    console.log("userId")
                    console.log(userId)
                    console.log(this.remoteList)
                    console.log(this.$refs["remoteVideo"+(this.remoteList.length-1)])
                    this.$nextTick(() => {
                        val.setDisplayRemoteVideo(userId,this.$refs["remoteVideo"+(this.remoteList.length-1)],1)
                    });
                },(error)=>{
                    console.log(error.message);
                });
                let index = this.remoteList.indexOf(publisher);
                console.log(index)
                if (index === -1&&this.remoteList.length<8) {
                    //新增
                    this.remoteList.push(publisher)

                }
            });
        },
        //remote流结束发布事件 onUnPublisher
        onUnPublisher(val){
            val.on("onUnPublisher", (publisher) => {
                console.log("onUnPublisher",publisher);
                let index = this.remoteList.findIndex(function(item) {
                    return item.userId === publisher.userId;
                });
                console.log("index")
                console.log(index)
                this.remoteList.splice(index,1)
                if (this.remoteList.length<1){
                    this.leaveVideo()
                }
            });
        },
        // 被服务器踢出或者频道关闭时回调 onBye
        onBye(val){
            val.on("onBye",(message) =>{
                var msg;
                switch (message.code) {
                    case 1:
                        msg = "被服务器踢出";
                        break;
                    case 2:
                        msg = "频道关闭";
                        break;
                    case 3:
                        msg = "同一个ID在其他端登录,被服务器踢出";
                        break;
                    default:
                        msg = "onBye";
                }
                this.remoteList = []
            });
        },
        leaveVideo(){
            this.remoteList =[]
            this.aliWebrtc.leaveChannel();
            this.aliWebrtc.dispose();
            this.hasVideo = false;
        },
        /**
         * 检测到用户离开频道
         * 更新用户列表
         * 移除用户视图
         */
        onLeave(val){
            val.on("onLeave", (publisher) => {
                console.log(publisher);
                let index = this.remoteList.findIndex(function(item) {
                    return item.userId === publisher.userId;
                });
                console.log(index)
                this.remoteList.splice(index,1)
                if (this.remoteList.length<1){
                    this.leaveVideo()
                }
            })
        },
        //页面刷新时调用
        OnRefresh(val){
            window.onbeforeunload=function (e) {
                if (!val){
                    console.log("isSupport失败");
                    return ;
                }
                val.leaveChannel();
                val.dispose();
            }
        },
        showVideoUser(){
            showVideoUser({customize:this.userId}).then(res=>{
                this.userList = res.data
            })
        },
        pullVideo(){
            this.videoForm.channelId = this.userId
            pullPerson(this.videoForm).then(res=>{
                console.log(res)
                this.videoForm = {}
                this.pullVideoStatus = false
            })
        },
        deleteChannel(){
            this.deleteForm.channelId = this.userId
            deleteChannel(this.deleteForm).then(res=>{
                console.log(res)
                this.deleteForm.channelId = {}
                this.resizeBox = false
                // this.unPublish(this.aliWebrtc)
                // this.stopPreview(this.aliWebrtc)
            })
        },
        unPublish(val){
            val.unPublish().then(()=>{
                console.log("结束流成功")
            } ,(error)=>{
                console.log("结束流失败",error);
            });
        },
        stopPreview(val){
            val.stopPreview().then(()=>{
                console.log("结束预览成功")
            }).catch((error) => {
                console.log("结束预览失败")
                // 结束预览失败
            });
        }


    },

}
</script>

<style lang="scss" scoped>
    #test{
        width:440px;
        height:calc(33vh - 93px)
    }
    #error{
        width:440px;
        height:calc(27vh - 81px);
    }
    .bg-main{
        height: 100vh;
        width: 100%;

    }
    .bm-view {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.4) 10%, rgba(167, 166, 166, 0.6) 90%, rgba(150, 148, 148, 0.8) 95%, rgb(175, 173, 173) 100%);
    }
    .bg-left{
        position: absolute;
        left: 0;
        height: 100vh;
        width: 460px;
        background-image: url("../../assets/bg-left.png");
        background-size: 95% 100vh;
        background-repeat: no-repeat;
        z-index: 11;
    }
    .bg-right{
        position: absolute;
        right: 0;
        height: 100vh;
        width: 460px;
        background-image: url("../../assets/bg-right.png");
        background-size: 100% 100vh;
        background-repeat: no-repeat;
        z-index: 11;
    }
    .bg-top{
        position: absolute;
        top: 0;
        width: 100%;
        height: 90px;
        background-image: url("../../assets/top.png");
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 12;
    }
    .video-button{
        width: 178px;height:36px;background-image:url('../../assets/video-button.png');
        background-size: 100%;
        float: left;
        background-repeat: no-repeat;
    }
    .video-button:active{
        width: 178px;
        height:36px;
        background-image:url('../../assets/video-button-active.png');
        background-size: 100%;
        float: left;
        background-repeat: no-repeat;
    }
    .notice-button{
        float: left;
        font-size: 30px;
        color: #fff;
        margin-left: 20px;
        line-height: 36px;
    }
    .left-content{
        margin-top: 55px;
        padding: 20px 0 20px 20px;
        color: #fff;
    }
    .right-content{
        margin-top: 55px;
        padding: 20px 20px 20px 0;
        color: #fff;
    }
    .data-top{
        width: 440px;
        height: 75px;
        cursor:pointer;
        background-image:url('../../assets/data_bg.png');
        background-size: 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        //下方区域的布局
        .content-box {
            display: grid;
            grid-template-columns: 3fr 3fr 3fr;
        }
    }
    .data-bottom{
        width: 440px;
        margin-top: 20px;
        height: calc(100vh - 190px);
        display: flex;
        flex-direction: row;
        .title{
            width: 166px;
            height: 25px;
            background-image:url('../../assets/title_bg.png');
            background-size: 100%;
            background-repeat: no-repeat;
            font-size: 16px;
            font-weight: bold;
            .font{
                margin-left: 35px;
                background-image:-webkit-linear-gradient(bottom,#bee2ee,#fff);
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
            }
        }
        .bottom-box-left{
            display: grid;
            grid-template-rows :5fr 5fr;
        }
        .bottom-box-right{
            display: grid;
            grid-template-rows :3fr 3fr 3fr;
        }
    }
    .equ-bottom{
        width: 440px;
        height:calc(33vh - 93px);
        background-image:url('../../assets/euq-bg.png');
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: left bottom;
        .text{
            padding-left: 40px;
            height:calc(33vh - 93px);
            display: flex;
            flex-direction: row;
            //下方区域的布局
            .equ-name {
                width: 60%;
                display: grid;
                grid-template-rows: 4fr 3fr 3fr 3fr;
            }
        }
    }
    .el-dialog .videoBox{
        background: rgba(255,255,255,0.5);

        .video-content{
            text-align: center;
            height: calc(45vh - 60px);
            padding: 10px
        }
    }
    .fireAddress{
        position:absolute;
        top:8.6vh;
        left:80%;
        width: 18%;
        height: 11vh;
        z-index: 12;
        padding-top: 25px;
        padding-left:15px ;
        font-size:16px ;

        box-sizing: border-box;
        border-radius:10px;
        background-color: #fff;

        animation: shake 1s infinite;
    }
    .fireNotice{
        position:absolute;
        top:25vh;
        left:80%;
        width: 18%;
        height: 11vh;
        z-index: 12;
        padding-top: 25px;
        padding-left:15px ;
        font-size:16px ;
        box-sizing: border-box;
        border-radius:10px;
        background-color: #fff;
        animation: shake 1s infinite;
    }
    @keyframes shake { /* 水平抖动，核心代码 */
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(+2px, 0, 0); }
        30%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(+4px, 0, 0); }
        50% { transform: translate3d(-4px, 0, 0); }
    }
    @keyframes mymove {
        50% {top: 300px;}
    }
</style>